import React from 'react'
import { connect } from 'react-redux'
import CSSModules from 'react-css-modules'
import styles from './shopCar.less'
import { List,InputItem ,WhiteSpace,Button,Picker,Icon,Toast} from 'antd-mobile'
import { ajaxGet,ajaxPost } from '../../common/jsajaxservice.js'
import ShopCarList from './shopCarlist.jsx'
import {changeNav,subAllShopCarTotal} from '../../actions'

const Item = List.Item;
@CSSModules(styles, { allowMultiple: true })

class ShopCar extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            commodityList : [],
            AllCommodityToggle:false,
            checkAll:false,
            selectSignal:false,
            break : 0
        }
    }
    componentDidMount(){
        this.props.tochangeNav({title:"购物车",rbtn:[
            <Icon key='1' onClick ={this.delectCommodity.bind(this)} type={require('./../../components/assets/icon_gwc_delete.svg')}></Icon>
        ]})
        this.getShopCarInfo()
    }
    componentWillReceiveProps(nextprops){
        this.judgeCheckAll(nextprops.changeShopCarTotal.active)
    }
    judgeCheckAll(num) {
        if(this.state.commodityList.length == 0)return;
        if(num >= this.state.commodityList.length){
            if(this.state.checkAll)return;
            this.setState({
                checkAll:true
            })
        }else {
            if(!this.state.checkAll)return;
            this.setState({
                checkAll:false
            })
        }
    }
    choosecheckAll(){
        var ii = this.state.checkAll? 0:1;
        console.log(ii)
        this.setState({
            checkAll:!this.state.checkAll,
            selectSignal:ii,
            break:this.state.break+1
        })
    }
    getShopCarInfo() {
        ajaxGet( "app/shopping/cart/list/open/"+ this.props.loginStatus.user.username ).then((res) => {
            this.setState({
                commodityList:res.data.shoppingCart || []
            })
        })
    }
    getshoppingItemIds() {

        let CommodityInfo = this.props.changeShopCarTotal.commodityInfo;
        let shoppingItemIds = [];
        CommodityInfo.map( v => {
            shoppingItemIds.push(v.shoppingItemId)
        })
        return shoppingItemIds;
    }
    delectCommodity() {
        if(this.props.changeShopCarTotal.active == 0) {
            Toast.info('请选择商品', 1);
            return false;
        }
        let shoppingItemIds = this.getshoppingItemIds()
        var data  = {
            'shoppingItemIds' : shoppingItemIds
        }
        let newcommodityList = this.state.commodityList.filter((v) => {
            var num = 0;
            this.props.changeShopCarTotal.commodityInfo.map( val => {
                console.log(v.shoppingItemId===val.shoppingItemId);
                num = v.shoppingItemId === val.shoppingItemId?num:num + 1
            })
            console.log(num,this.state.commodityList.length,num == this.state.commodityList.length);
            return num == this.props.changeShopCarTotal.commodityInfo.length
        })
        let that = this
        ajaxPost("app/shopping/cart/batch", data ).then(res => {
            Toast.info("删除"+res.msg, 1);
            that.setState({
                commodityList:newcommodityList
            })
            that.props.tosubAllShopCarTotal();
        })
    }
    shoppingCommodity() {
        if(this.props.changeShopCarTotal.active == 0) {
            Toast.info('请选择商品', 1);
            return false;
        }

        var data  = this.getshoppingItemIds().join(",");
        ajaxGet("app/shopping/cart/open/"+ data ).then(res => {
            Toast.info("购买"+res.msg, 1);
        })
    }
    render() {
        if(this.state.commodityList.length == 0){
            return(
                <div>
                    <img style={{margin:'3rem auto 0.3rem',display:'block'  }} src={require('./icon_gwc_gouwuche.png')} alt=""/>
                    <div>
                        <p style={{textAlign:'center',lineHeight:'0.6rem',color:'#999999'}}>您的购物车还是空的~~</p>
                        <p style={{textAlign:'center',lineHeight:'0.6rem',color:'#999999'}}>请尽快选购吧</p>
                    </div>
                </div>
            )
        }
        return(
            <div style = {{overflow: "hidden"}}>
                {
                    this.state.commodityList.map((val) => {
                        return <ShopCarList break={this.state.break} selectSignal = {this.state.selectSignal} dataInfo = {val} key = {val.shoppingItemId}></ShopCarList>
                    })
                }
                <div styleName = 'Remarks-Box'>
                    <input type="text" placeholder="备注信息，选填"/>
                </div>
                <div styleName = 'shopcar-bottom-buttonBox'>
                    <div>
                        <div onClick={this.choosecheckAll.bind(this)} styleName = 'chooseAll'>
                            <Icon style={{marginBottom:'-0.12rem',marginRight:'0.05rem'}} type={this.state.checkAll?require( './../../components/assets/icon_gg_duigou.svg' ):require( './../../components/assets/icon_gg_duigouweixuan.svg' )} size={"sm"}></Icon>
                            <span>{this.state.checkAll?'取消':'全选'}</span>
                        </div>
                        <div styleName = 'totalBox'>
                            <span>合计：</span>
                            <span style={{color:'#FD8900'}}>￥ {this.props.changeShopCarTotal.price}</span>
                        </div>
                    </div>
                    <Button type="primary" onClick = {this.shoppingCommodity.bind(this)} style = {{fontSize:'0.32rem',fontFamily:'微软雅黑',borderRadius:'0',height:'1rem',flex:'1'}}>去结算({this.props.changeShopCarTotal.active})</Button>
                </div>
            </div>
        )
    }
}
const mapStateToProps = ( state ) => ({
    loginStatus:state.loginStatus,
    changeShopCarTotal:state.changeShopCarTotal
})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    tosubAllShopCarTotal:() => dispatch( subAllShopCarTotal ())
})

export default connect( mapStateToProps,mapDispatchToProps )( ShopCar )